<template>
    <div class="info grid-x">
        <div class="player small-6 cell text-center">
            <h5>You</h5>
            <div class="healtBar">
                <div
                        class="current text-center"
                        :style="{
                      width:playerHealth + '%',
                      background:playerHealth <= 30?'red':'#30c5c5' }"
                >
                    {{playerHealth}}
                </div>
            </div>
        </div>
        <div class="monster small-6 cell text-center">
            <h5>Monster</h5>
            <div class="healtBar">
                <div
                        class="current text-center"
                        :style="{width:monsterHealth + '%'    }"
                >
                    {{monsterHealth}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import "../../node_modules/foundation-sites/dist/css/foundation.css"

export default {
  name: "battle-info",
  props: ["playerHealth", "monsterHealth"]
}
</script>

<style lang="less" scoped>
    .info {
        .healtBar {
            border-radius: 10px;
            background-color: gainsboro;
            width: 50%;
            height: 40px;
            margin: 0 auto;
            overflow: hidden;
            .current {
                line-height: 40px;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                background-color: #30c5c5;
                margin: 0;
                color: white;
                transition: width 0.2s linear, background-color 0.1s linear;
            }
        }
    }
</style>
